<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>头部组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="../../assets/css/commons/commons_clear.css">
    <link rel="stylesheet" href="../../assets/css/commons/commons_header.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1543882_uda0yo9s1sn.css">
</head>

<body>
    <div class="header-position">
        <div class="header" id="header">
            <div :class="[scroll>=200?'block':'none']">
            <div class="content">
                <a href="#">
                    <p>知道</p>
                </a>
                <ul class="content-ul">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">发现</a></li>
                    <li><a href="#">等你来答</a></li>
                </ul>
                <div class="search">
                    <div class="search-l">
                        <div class="search-l-box">
                            <form>
                                <label class="search-l-box-in">
                                    <input placeholder="请输入" />
                                    <button class="icon-sousuo-btn"><span class="iconfont icon-sousuo"></span></button>
                                </label>
                            </form>
                        </div>
                    </div>
                    <button class="btn">提问</button>
                </div>
                <div class="user">
                    <div>
                        <button class="icon-xiaoxi1-btn"><span class="iconfont icon-xiaoxi1"></span></button>
                    </div>
                    <div>
                        <button class="icon-xiaoxi-btn"><span class="iconfont icon-xiaoxi"></span></button>
                    </div>
                    <div>
                        <!-- 用户头像↓ -->
                        <button><span class="iconfont icon-ditu"></span></button>
                    </div>
                </div>
            </div>
            </div>
            <div :class="[scroll>=200?'block':'none']">
                <div class="content">
                    <a href="#">
                        <p>知道</p>
                    </a>
                    <ul class="content-ul">
                        <li><a href="#">推荐</a></li>
                        <li><a href="#">关注</a></li>
                        <li><a href="#">热榜</a></li>
                    </ul>
                    <div class="search" style=" flex: 1;justify-content: flex-end;">
                        <div class="search-l" style="width:230px;">
                            <div class="search-l-box" style="width:230px;">
                                <form>
                                    <label class="search-l-box-in">
                                        <input placeholder="请输入"  style="width:160px;" />
                                        <button class="icon-sousuo-btn"><span
                                                class="iconfont icon-sousuo"></span></button>
                                    </label>
                                </form>
                            </div>
                        </div>
                        <button class="btn" >提问</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="../../assets/js/commons/commons_header.js"></script>

</html>